<!--
 * Description: CBOM发起报价-Base组件
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/10/15 15:26
-->

<template>
  <BaseWrap v-loading="isRequesting">
    <div class="top-select">
      <!--产品专案-->
      <el-select v-model="projectId" clearable filterable placeholder="选择专案" size="small">
        <el-option
          v-for="item in projectList"
          :key="item.projectId"
          :label="item.projectName"
          :value="item.projectId"
        />
      </el-select>
      <el-button size="small" style="margin-left:10px" type="primary" @click="query">
        {{ $t('button.query') }}
      </el-button>
    </div>
    <div class="bottom-table">
      <el-table
        border
        :cell-class-name="cellClass"
        :data="tableData"
        :header-cell-style="headerClass"
        height="100%"
        style="width: 100%;"
      >
        <!--序号列-->
        <el-table-column align="center" fixed :label="$t('table.NO')" min-width="50px">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <!--bu类型-->
        <el-table-column
          align="center"
          :label="$t('Cbom.bu')"
          min-width="200px"
          prop="bu"
          sortable
        />
        <!--产品专案-->
        <el-table-column
          align="center"
          :label="$t('Cbom.project')"
          min-width="300px"
          prop="project"
          sortable
        />

        <!--Subject-->
        <el-table-column align="center" label="Subject" min-width="200px" prop="subject" sortable />

        <!--Tracking Sku-->
        <el-table-column
          align="center"
          :label="$t('Cbom.trackingSku')"
          min-width="200px"
          prop="trackingSku"
          sortable
        />
        <!--CBOM版本-->
        <el-table-column
          align="center"
          :label="$t('Cbom.cbomVersion')"
          min-width="200px"
          prop="cbomVersion"
          sortable
        />

        <!-- Base Cost -->
        <el-table-column
          align="center"
          label="Base Cost"
          min-width="160px"
          prop="baseCost"
          sortable
        />

        <!-- CBOM Cost -->
        <el-table-column
          align="center"
          label="CBOM Cost"
          min-width="160px"
          prop="cbomCost"
          sortable
        />

        <!-- TEC Pool Cost -->
        <el-table-column
          align="center"
          label="TEC Pool Cost"
          min-width="160px"
          prop="tecPoolCost"
          sortable
        />

        <!-- EC/DFC Cost -->
        <el-table-column
          align="center"
          label="EC/DFC Cost"
          min-width="140px"
          prop="ecDfcCost"
          sortable
        />
        <!-- FD Cost -->
        <el-table-column align="center" label="FD Cost" min-width="120px" prop="fdCost" sortable />

        <!--是否报价-->
        <el-table-column align="center" label="是否报价" min-width="200px" prop="isQuote" sortable>
          <template slot-scope="scope">
            {{ scope.row.isQuote ? '已报价' : '未报价' }}
          </template>
        </el-table-column>

        <!--操作列-->
        <el-table-column
          align="center"
          fixed="right"
          :label="$t('table.operate')"
          min-width="200px"
        >
          <template slot-scope="scope">
            <el-button size="mini" @click="rowQute(scope.row)">
              {{ $t('button.view') }}
            </el-button>
            <el-button
              :disabled="scope.row.isQuote"
              size="mini"
              type="success"
              @click="rowQute(scope.row)"
            >
              {{ $t('button.quote') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </BaseWrap>
</template>
<script>
import { projectSimpleList } from '@/api/quote/project'
import { cbomQuoteListQuote } from '@/api/cbom/quote'

export default {
  name: 'CbomQuoteStartBaseData',

  data() {
    return {
      isRequesting: false,

      projectId: '',

      projectList: [],

      tableData: []
    }
  },

  created() {
    this.getProjectList()

    /** 刷新数据 */
    this.$bus.$on('cbom-quote-refresh', async rowData => {
      try {
        await this.query()
        const currentItem = this.tableData.find(item => item.id === rowData.id)
        this.rowQute(currentItem)
      } catch (error) {
        console.log(error)
      }
    })
  },

  beforeDestroy() {
    /** 刷新数据 */
    this.$bus.$off('cbom-quote-refresh')
  },

  methods: {
    // 单元格样式
    cellClass() {
      return 'no-border'
    },
    // table 头部样式
    headerClass() {
      return 'background: #e4e4e4 !important;padding:5px 0px;'
    },
    /** 加载专案 */
    async getProjectList() {
      try {
        const res = await projectSimpleList({})
        this.projectList = res.data
      } catch (error) {
        console.log(error)
      }
    },

    /* 查询表格数据*/
    async query() {
      try {
        this.isRequesting = true
        const res = await cbomQuoteListQuote({
          projectId: this.projectId
        })
        this.tableData = res.data
      } catch (error) {
        console.log(error)
        this.tableData = []
      } finally {
        this.isRequesting = false
      }
    },

    rowQute(rowData) {
      this.$bus.$emit('cbom-quote-list', rowData)
    }
  }
}
</script>

<style lang="scss" scoped>
.top-select {
  height: 60px;
  text-align: left;
  display: flex;
  align-items: center;
}
.bottom-table {
  height: calc(100% - 60px);
}
</style>
